:root {
  --animation-duration: 300ms; // 动画时长
  --drawer-default-wh: 100%; // 抽屉默认宽高
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0 0 0 / 70%);
  z-index: 100;
}
.drawer {
  background: #fff;
  pointer-events: auto;
  position: absolute;
}

.drawer-content {
  height: 100%;
}

.drawer-bottom {
  bottom: 0;
}
.drawer-top {
  top: 0;
}
.drawer-left {
  left: 0;
}
.drawer-right {
  right: 0;
}

.drawer-bottom {
  &-appear {
    animation: bottom-appear var(--animation-duration);
  }
  &-disappear {
    animation: bottom-disappear var(--animation-duration);
  }
}
.drawer-top {
  &-appear {
    animation: top-appear var(--animation-duration);
  }
  &-disappear {
    animation: top-disappear var(--animation-duration);
  }
}
.drawer-left {
  &-appear {
    animation: left-appear var(--animation-duration);
  }
  &-disappear {
    animation: left-disappear var(--animation-duration);
  }
}
.drawer-right {
  &-appear {
    animation: right-appear var(--animation-duration);
  }
  &-disappear {
    animation: right-disappear var(--animation-duration);
  }
}

@keyframes bottom-appear {
  from {
    bottom: calc(var(--drawer-default-wh) * -1);
  }
  to {
    bottom: 0;
  }
}
@keyframes bottom-disappear {
  from {
    bottom: 0;
  }
  to {
    bottom: calc(var(--drawer-default-wh) * -1);
  }
}
@keyframes top-appear {
  from {
    top: calc(var(--drawer-default-wh) * -1);
  }
  to {
    top: 0;
  }
}
@keyframes top-disappear {
  from {
    top: 0;
  }
  to {
    top: calc(var(--drawer-default-wh) * -1);
  }
}
@keyframes left-appear {
  from {
    left: calc(var(--drawer-default-wh) * -1);
  }
  to {
    left: 0;
  }
}
@keyframes left-disappear {
  from {
    left: 0;
  }
  to {
    left: calc(var(--drawer-default-wh) * -1);
  }
}
@keyframes right-appear {
  from {
    right: calc(var(--drawer-default-wh) * -1);
  }
  to {
    right: 0;
  }
}
@keyframes right-disappear {
  from {
    right: 0;
  }
  to {
    right: calc(var(--drawer-default-wh) * -1);
  }
}
